<template>
  <div class="app-container">
    <el-form :model="configList" ref="form" label-width="120px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>网站基本信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="网站名称" prop="site.name">
              <el-input v-model="siteName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网站标题" prop="site.title">
              <el-input v-model="siteTitle" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="网站描述" prop="site.description">
              <el-input v-model="siteDescription" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="网站关键字" prop="site.keywords">
              <el-input v-model="siteKeywords" placeholder="多个关键字用逗号分隔" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="网站Logo" prop="site.logo">
              <el-input v-model="siteLogo" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版权信息" prop="site.copyright">
              <el-input v-model="siteCopyright" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      
      <el-card class="box-card" style="margin-top: 20px;">
        <div slot="header" class="clearfix">
          <span>其他配置</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-table :data="otherConfigList" style="width: 100%">
              <el-table-column label="配置名称" prop="configName" />
              <el-table-column label="配置键名" prop="configKey" />
              <el-table-column label="配置值" prop="configValue">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.configValue" />
                </template>
              </el-table-column>
              <el-table-column label="备注" prop="remark" />
            </el-table>
          </el-col>
        </el-row>
      </el-card>
      
      <div style="text-align: center; margin-top: 20px;">
        <el-button type="primary" @click="submitForm">保存配置</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { listSiteConfig, updateSiteConfig } from "@/api/cms/site";

export default {
  name: "SiteConfig",
  data() {
    return {
      // 网站配置列表
      configList: [],
      // 网站名称
      siteName: "",
      // 网站标题
      siteTitle: "",
      // 网站描述
      siteDescription: "",
      // 网站关键字
      siteKeywords: "",
      // 网站Logo
      siteLogo: "",
      // 版权信息
      siteCopyright: "",
      // 其他配置列表
      otherConfigList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询配置列表 */
    getList() {
      listSiteConfig().then(response => {
        this.configList = response.rows;
        // 提取基础配置
        this.siteName = this.getConfigValue("site.name");
        this.siteTitle = this.getConfigValue("site.title");
        this.siteDescription = this.getConfigValue("site.description");
        this.siteKeywords = this.getConfigValue("site.keywords");
        this.siteLogo = this.getConfigValue("site.logo");
        this.siteCopyright = this.getConfigValue("site.copyright");
        // 过滤出其他配置
        this.otherConfigList = this.configList.filter(item => 
          !["site.name", "site.title", "site.description", "site.keywords", "site.logo", "site.copyright"].includes(item.configKey)
        );
      });
    },
    /** 根据配置键名获取配置值 */
    getConfigValue(configKey) {
      const config = this.configList.find(item => item.configKey === configKey);
      return config ? config.configValue : "";
    },
    /** 提交按钮 */
    submitForm() {
      // 构造更新数据
      const updateList = [];
      
      // 更新基础配置
      this.updateConfigValue(updateList, "site.name", this.siteName);
      this.updateConfigValue(updateList, "site.title", this.siteTitle);
      this.updateConfigValue(updateList, "site.description", this.siteDescription);
      this.updateConfigValue(updateList, "site.keywords", this.siteKeywords);
      this.updateConfigValue(updateList, "site.logo", this.siteLogo);
      this.updateConfigValue(updateList, "site.copyright", this.siteCopyright);
      
      // 更新其他配置
      this.otherConfigList.forEach(item => {
        updateList.push({
          configId: item.configId,
          configValue: item.configValue
        });
      });
      
      // 批量更新
      Promise.all(updateList.map(item => updateSiteConfig(item))).then(() => {
        this.msgSuccess("保存成功");
        this.getList();
      });
    },
    /** 更新配置值 */
    updateConfigValue(updateList, configKey, configValue) {
      const config = this.configList.find(item => item.configKey === configKey);
      if (config) {
        updateList.push({
          configId: config.configId,
          configValue: configValue
        });
      }
    },
    /** 重置按钮 */
    resetForm() {
      this.getList();
    }
  }
};
</script>

<style scoped>
.box-card {
  border: 1px solid #e6ebf5;
}
</style>